<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>视频播放页面</title>

</head>
<body>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {

            $.ajax({
                url: "http://192.168.10.123:8000/stream",
                type: "get",
                dataType: "json",

                success: function (data) {
                    $.each(data, function () {
                        //alert(data)
                        // $("#txtMp4path").value = data;
                        $("#ul1").html("<li>" + data + "</li>");
                        var array = data.toString().split(',');
                        var htmlStr = "";
                        for (var i = 0; i <= array.length; i++) {

                            if (array[i] != undefined && array[i] != "") {

                                htmlStr += "<li onclick=\"clickPath('" + array[i].toString() + "')\">" + array[i] + "</li>";
                            }
                        }
                        $("#ul2").html(htmlStr);
                    });
                }
            });
        });

    });

    function clickPath(path) {
        var srcstr = "http://192.168.10.123:8000/stream?fpath=" + path;

        $("#videoPlayer").attr("src", srcstr);
    }

</script>


<video id="videoPlayer" src="" width="960" height="720" controls="controls" autoplay="autoplay">
    <!--<source   type="video/mp4">-->
</video>
　


<ul id="ul1">
    <li>一级
        <ul>
            <li>二级</li>
        </ul>

    </li>
</ul>


<ul id="ul2">
    <li>一级
        <ul>
            <li>二级</li>
        </ul>

    </li>
</ul>

<h1><input type="text" id="txtMp4path"/></h1>
<input type="button" value="播放列表" id="btn"/>

</body>
</html>